<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
    <title>Untitled</title>
    <link rel="stylesheet" href="xtable.css" media="all">

    <script src="jquery-3.4.1.min.js"></script>
    <script src="XTable.js"></script>
    <script type="text/javascript">
        var cols = [{
                "field": "companyId",
                "title": "公司ID",
                "hidden": true,
                "readOnly": true,
                "event": null,
                "valueType": "str",
                "children": []
            },
            {
                "field": "companyName",
                "title": "公司",
                "hidden": false,
                "readOnly": true,
                "event": "null",
                "valueType": "str",
                "children": []
            },
            {
                "field": 4,
                "title": "标题",
                "hidden": false,
                "readOnly": true,
                "event": null,
                "children": [{
                        "field": "529",
                        "title": "标题",
                        "hidden": false,
                        "readOnly": true,
                        "event": null,
                        "children": [{
                            "field": "530",
                            "title": "标题标题",
                            "hidden": false,
                            "readOnly": false,
                            "event": "4_530",
                            "textAglin": "right",
                            "valueType": "number",
                            "summary": true,
                            "children": []
                        }]
                    },
                    {
                        "field": "531",
                        "title": "标题",
                        "hidden": false,
                        "readOnly": true,
                        "event": null,
                        "children": [{
                            "field": "532",
                            "title": "标题标题",
                            "hidden": false,
                            "readOnly": false,
                            "event": null,
                            "textAglin": "right",
                            "valueType": "number",
                            "summary": true,
                            "children": []
                        }, {
                            "field": "534",
                            "title": "标题标题",
                            "hidden": false,
                            "readOnly": false,
                            "event": null,
                            "textAglin": "right",
                            "valueType": "number",
                            "summary": true,
                            "children": []
                        }]
                    },
                    {
                        "field": "533",
                        "title": "标题",
                        "hidden": false,
                        "readOnly": true,
                        "event": null,
                        "textAglin": "right",
                        "width": 200,
                        "valueType": "number",
                        "summary": true,
                        "children": []
                    },
                    {
                        "field": "status",
                        "title": "标题",
                        "hidden": false,
                        "readOnly": true,
                        "summary": false,
                        "valueType": "str",
                        "event": null,
                        "children": []
                    }
                ]
            }
        ];
        var data = [{
                "530": "888888888.00",
                "532": "11111.00",
                "533": "888877777.00",
                "status": "生效",
                "companyId": "C00001",
                "companyName": "公司公司有限公司"
            },
            {
                "530": "88888883338.98",
                "532": "4444444.00",
                "533": "88884438894.98",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_天津"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            },
            {
                "530": "9999999.00",
                "532": "111311.00",
                "533": "9888688.00",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_河北"
            }
        ];

        var data2 = [{
                "530": "888888888.00",
                "532": "11111.00",
                "533": "888877777.00",
                "status": "生效",
                "companyId": "C00001",
                "companyName": "公司公司有限公司"
            },
            {
                "530": "88888883338.98",
                "532": "4444444.00",
                "533": "88884438894.98",
                "status": "生效",
                "companyId": "C00002",
                "companyName": "公司_天津"
            }
        ];
    </script>
</head>

<body>
    <input type="button" id="showAll" value="showAll"></input>
    <input type="button" id="showAll2" value="showAll_down"></input>
    <br>
    <br>
    <div id="container">

    </div>
    <br>
    <script type="text/javascript">
        // 下面表格需要编辑
        var options = {
            data: data,
            colnums: cols,
            readOnly: true,
            summary: true,
            fixedheader: true,
            fixedcolnums: 2
        };
        var xTable = new XTable(document.getElementById("container"), options);
        console.log(xTable);
        document.getElementById("showAll").onclick = function () {
            alert(JSON.stringify(xTable.getAllData()));
        };
    </script>
</body>

</html>